<template>
    <el-dialog
            v-bind="$attrs" v-on="$listeners"
            width="400px"
            append-to-body
            :close-on-click-modal="false"
            :before-close="handleClose">
        <el-carousel trigger="click" height="220px" @change="changeCarousel"
                     style="margin-bottom: 20px; margin-top: 5px;">
            <el-carousel-item v-for="(item,index) in list" :key="index" :class="{'only':!item.is_allow}"
                              style="padding: 10px">
                <div class="flex">
                    <el-avatar :size="40" :src="getAvatarUrl(item)" style="margin-top: 5px">
                        <img src="@/assets/images/logo.png"/>
                    </el-avatar>
                    <div>{{item.sender_info.alias}}</div>
                    <i class="el-icon-lock" v-if="!item.is_allow"></i></div>
                <div class="notes-content">{{item.title}}</div>
                <div v-if="!item.is_allow" style="margin-left: 10px;"><i class="el-icon-view"></i>
                    {{item.recipient_alias}}可阅
                </div>
                <div v-else style="margin-left: 10px;">所有人可阅
                </div>
                <div class="dialog-footer">
                    <div>{{item.gmt_created}}</div>
                  <el-button type="text" icon="el-icon-edit-outline" @click="quote" v-if="enable">引用</el-button>
                  <el-button type="text" icon="el-icon-delete" @click="deleteDocumentNotice">删除</el-button>
                </div>
            </el-carousel-item>
        </el-carousel>
    </el-dialog>
</template>
<script>
    import schoolSignature from "@/api/officialDocument/schoolSignature/index";

    export default {
        name: "NotesListDialog",
        data() {
            return {
                dialogVisible: false,
                circleUrl: "",
                item: {},
                is_allow: false
            };
        },
        computed:{
          enable(){
            return this.$store.getters.enable
          },
        },
        props: ["list"],
        created() {
            this.item = this.list[0]
        },
        methods: {
            getAvatarUrl(item) {
                this.is_allow = item.is_allow
                return item&&item.sender_info ? item.sender_info.avatar: ""
            },
            changeCarousel(index) {
                this.item = this.list[index]
            },
            handleClose(done) {
                this.$emit('update:visible', false)
            },
            deleteDocumentNotice() {
                this.$confirm("删除该小纸条, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    schoolSignature.deleteDocumentNotice(this.item.id).then(res => {
                        this.msgSuccess(res.msg)
                        this.$emit("reloadList")
                    })
                });
            },
            quote() {
              this.$store.dispatch("suggestion/setSuggestion", this.item.title);
                this.msgSuccess("引用成功！")
            }
        }
    };
</script>
<style lang="scss" scoped>
    @import "~@/assets/styles/variables.scss";
    ::v-deep.el-carousel{
        .el-carousel__indicators{
            display: none;
        }
    }
    .el-icon-lock {
        display: inline-block;
        font-size: 22px;
        line-height: 50px;
        position: absolute;
        right: 10px;
    }
    .only {
        background-color: #ffeeec;
        .el-dialog__header {
            background-color: #ffeeec;
        }
    }

    ::v-deep .el-dialog {
        .el-dialog__header {
            border-bottom: none;
            background-color: #ffffff;

            .el-dialog__headerbtn {
                top: 0px !important;
                right: 0px;

                .el-dialog__close {
                    background-color: $fixedMenuBg;
                    color: #ffffff;
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                }
            }
        }

        .el-dialog__body {
            border-bottom: 1px solid #eee;
            margin-top: -50px;
            padding: 20px 20px 0px 20px;

            .flex {
                display: flex;
                padding: 0px 20px;

                > div {
                    padding: 20px;
                }
            }

            .notes-content {
                padding: 20px;
                overflow: hidden;
                height: 84px
            }

        }

        .dialog-footer {
            text-align: left;

            div {
                display: inline-block;
                padding: 10px;
            }

            .el-button {
                float: right;
                margin-left: 20px;
            }
        }
    }
</style>

